<!--
 * @Author: 曹捷
 * @Date: 2021-03-06 14:57:09
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-03-08 10:06:02
 * @Description: 播放器
-->
<template>
  <video :id="videoId" controls v-if="videoLink">
    <div>暂不支持</div>
    <source :src="videoLink">
  </video>
</template>

<script>
import util from './../../utils/utils'
export default {
  props: {
    videoLink: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      videoId: '',
      videoInfo: '',
    }
  },
  watch: {
    videoLink(val) {
      this.initVideo()
    },
  },
  methods: {
    initVideo() {
      console.log(
        '🚀 ~ file: obit-vid tVideo',
        this.videoLink,
        this.videoId,
        this.videoInfo
      )
      this.$nextTick(() => {
        if (this.videoLink && !this.videoInfo) {
          setTimeout(() => {
            this.videoInfo = videojs(this.videoId, {}, () => {
              console.log(this.videoId + 'video播放器初始化成功')
            })
          }, 500)
        }
      })
    },
  },
  mounted() {
    this.videoId = util.util.randomString()
    this.initVideo()
  },
  beforeDestroy() {
    console.log('销毁', this.videoLink)
    this.videoInfo.dispose()
  },
}
</script>

<style>
</style>